<script setup>
import { ref } from 'vue';
import { showToast, closeToast, showLoadingToast } from 'vant';
import 'vant/es/toast/style';
import { isNumeric } from 'vant/lib/utils';
const calendar = ref(getToday());
const total = ref(0);
const sales = ref(0);
const list = ref([]);
const loading = ref(false);
const showCalendar = ref(false);
const firstLoad = ref(true);
const minDate = new Date(2023, 11, 20);

const list_filter = ref(window.localStorage.getItem('list_filter') || '1');
const setRef = ref(null);
const show_update_time = ref(window.localStorage.getItem('show_update_time') == 1 ? true : false);


let load_status = false;
let fulllist = [];
let today = new Date();
let moreday = [];
let maxDate = new Date(today);

function getList(date, cb) {
    if(load_status){
        return false;
    }
    load_status = true;
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
    });
    fetch('https://bongm.com/api/cinema/list?day=' + date)
        .then((res) => res.json())
        .then((res) => {
            closeToast();
            if (res.code == 1) {
                calendar.value = date;
                fulllist = res.data;

                let timestamp = Math.floor(today.getTime() / 1000)
                if(isNumeric(res.msg) && res.msg > timestamp){
                    let temptime = new Date(res.msg * 1000)
                    if(temptime.getFullYear() == today.getFullYear() || temptime.getFullYear() == today.getFullYear() +  1){
                        maxDate.setFullYear(temptime.getFullYear());
                        maxDate.setMonth(temptime.getMonth());
                        maxDate.setDate(temptime.getDate());
                    }
                }
                total.value = fulllist.length;
                sales.value = 0;
                fulllist.forEach((item) => {
                    if (item.sale_num) {
                        sales.value++;
                    }
                });
                scrollTo(0, 0);
                typeof cb === 'function' && cb();
            } else {
                showToast(res.msg);
            }
        })
        .catch((err) => {
            closeToast();
            showToast('网络错误');
        }).finally(() => {
            loading.value = false;
            load_status = false;
        })
}
function getToday() {
    const date = new Date();
    const year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
    return `${year}-${month}-${day}`;
}
function onConfirm(date) {
    const year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
    showCalendar.value = false;
    getList(`${year}-${month}-${day}`, function(){
        list.value = fulllist;
        list_filter_onchange(list_filter.value)
    });
}

function onRefresh(){
    getList(calendar.value, function(){
        list_filter_onchange(list_filter.value)
    });
}

function formatter(day){
    const date = new Date();
    const year = date.getFullYear(),
        month = date.getMonth() + 1,
        today = date.getDate();
    const calendarYear = day.date.getFullYear(),
        calendarMonth = day.date.getMonth() + 1,
        calendarDate = day.date.getDate();
    for(let dayd of moreday){
        if(calendarYear == dayd[0] && calendarMonth == dayd[1] && calendarDate == dayd[2]){
            day.type = ''
        }
    }
    if(calendarYear == year && calendarMonth == month && calendarDate == today){
        day.text = '今';
    }
    return day;
}

function show_update_time_onchange(value){
    window.localStorage.setItem('show_update_time', value ? 1 : 0);
    show_update_time.value = value;
    setRef.value.toggle();
}

function list_filter_onchange(value){
    window.localStorage.setItem('list_filter', value);
    if(value == '1'){
        list.value = fulllist;
    }else if(value == '2'){
        list.value = fulllist.filter((item) => {
            return item.show_progress != 100;
        });
    }else if(value == '3'){
        list.value = fulllist.filter((item) => {
            return item.sale_num > 0;
        })
    }
    if(setRef.value.state.showPopup){
        setRef.value.toggle();
    }
}

getList(calendar.value, function(){
    firstLoad.value = false;
    list.value = fulllist;
    list_filter_onchange(list_filter.value)
});
</script>

<template>
    <div class="header">
        <div class="calendar" @click="showCalendar = true">
            <img src="./assets/date.svg" />
            <div>{{ calendar }}</div>
            <div class="sales">
                <span class="red">{{ sales }}</span> / {{ total }}
            </div>
        </div>
        <div class="dropdown-box">
            <van-dropdown-menu>
                <van-dropdown-item title="筛选" ref="setRef">
                    <div class="custom-dropdown-item">
                        <span class="custom-dropdown-title">显示过滤</span>
                        <div class="custom-dropdown-container">
                            <van-radio-group @change="list_filter_onchange" v-model="list_filter" direction="horizontal">
                                <van-radio name="1" checked-color="#ee0a24" icon-size="1rem">全部</van-radio>
                                <van-radio name="2" checked-color="#ee0a24" icon-size="1rem">未放映</van-radio>
                                <van-radio name="3" checked-color="#ee0a24" icon-size="1rem">已售票</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                    <div class="custom-dropdown-item">
                        <span class="custom-dropdown-title">其它选项</span>
                        <div class="custom-dropdown-container">
                            <van-checkbox v-model="show_update_time" @change="show_update_time_onchange" shape="square" checked-color="#ee0a24" icon-size="1rem">显示更新时间</van-checkbox>
                        </div>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
    </div>
    <div v-if="list.length == 0 && loading == false && firstLoad == false">
        <van-empty description="内容为空，请更换其它日期或过滤选项" />
    </div>
    <div v-else>
        <van-pull-refresh v-model="loading" @refresh="onRefresh" :head-height="80" style="min-height: 100vh; padding-top: 3rem; box-sizing: border-box;">
            <div class="list_container">
                <div class="show_item" v-for="item in list">
                    <div class="show_hall">
                        <div class="item_hall" :style="{
                            'background-color':
                                item.show_progress == 100
                                    ? '#07c160'
                                    : item.show_progress == 0
                                        ? ''
                                        : '#ee0a24',
                        }">
                            <span>{{ item.hall_name }}</span>
                        </div>
                    </div>
                    <div class="show_detail">
                        <div class="detail_box">
                            <div class="box_left">
                                <div class="show_title">
                                    <div class="van-ellipsis title">{{ item.movie_name }}</div>
                                </div>
                                <div class="show_time">
                                    <span class="time_range" style="margin-right:0.6rem;">{{ item.start_time_str }} - {{ item.end_time_str }}</span>
                                    <span v-if="item.show_progress > 0 && item.show_progress < 100"
                                        style="color: #ee0a24;">{{ item.show_remain }}分后结束</span>
                                </div>
                            </div>
                            <div class="box_right">
                                <div class="sales_num_box" :class="{'saled': item.sale_num > 0, 'refund': item.refund > 0}">
                                    <span>售出</span>
                                    <span>{{ item.sale_num }}</span>
                                </div>
                            </div>
                        </div>
                        <div v-if="show_update_time" class="detail_updatetime">
                            更新时间：{{ item.updatetime_str }}
                        </div>
                        <div class="progress">
                            <div class="skills skills-played" v-if="item.show_progress > 0 && item.show_progress < 100"
                                :style="{ width: item.show_progress + '%' }"></div>
                            <div class="skills skills-end" v-else-if="item.show_progress == 100"></div>
                            <div class="skills" v-else></div>
                        </div>
                    </div>
                </div>
            </div>
        </van-pull-refresh>
    </div>
    <van-calendar color="#ec1611" v-model:show="showCalendar" :min-date="minDate" :max-date="maxDate"
        @confirm="onConfirm" :show-confirm="false" :formatter="formatter" />
</template>

<style scoped>
.van-dropdown-menu__title::after{
    content: unset;
}
.dropdown-box .custom-dropdown-item{
    padding: .8rem;
    border-bottom: 1px solid var(--van-gray-4);
}
.dropdown-box .custom-dropdown-item:last-child{
    border: 0;
}
.custom-dropdown-title{
    display: block;
    color: var(--van-gray-6);
    font-size: .8rem;
}
.custom-dropdown-container{
    margin-top: .6rem;
}
.detail_updatetime{
    margin-top: .5rem;
    font-size: .7rem;
    color: var(--van-gray-6);
}
.header {
    display: flex;
    justify-content: space-between;
    padding: 0 0.6rem;
    height: 3rem;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid var(--van-gray-4);
    font-size: 0.9rem;
    align-items: center;
    background-color: var(--van-white);
}

.calendar {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.calendar img {
    width: 1.9rem;
    height: 1.9rem;
    margin-right: 0.3rem;
}
.box_left{
    flex-shrink: 1;
    overflow: hidden;
}
.detail_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box_right{
    flex-shrink: 0;
}
.sales_num_box{
    font-size: .8rem;
}
.sales_num_box span{
    color: var(--van-gray-6);
    display: block;
    text-align: center;
    border: 2px solid var(--van-gray-3)
}
.sales_num_box span:first-child{
    background-color: var(--van-gray-3);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    border-bottom: 0;
    padding: 0.2rem 0.5rem;
}
.sales_num_box span:last-child{
    border-top: 0;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.saled span{
    color: var(--van-red);
    border-color: var(--van-red);
}
.saled span:first-child{
    background-color: var(--van-red);
    color: var(--van-white);
}
.saled span:last-child{
    font-weight: 600;
}

.refund span{
    color: var(--van-orange-dark);
    border-color: var(--van-orange-dark);
}
.refund span:first-child{
    background-color: var(--van-orange-dark);
    color: var(--van-white);
}
.refund span:last-child{
    font-weight: 600;
}

.red {
    color: var(--van-red);
}

.sales {
    margin-left: 1.1rem;
}

.list_container {
    padding: 0.5rem;
}

.show_item {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.show_item:last-child {
    margin-bottom: 0;
}

.show_detail {
    background-color: var(--van-white);
    box-shadow: 0 0 0.5rem -0.4rem var(--van-black);
    padding: 0.8rem 0.6rem;
    position: relative;
    flex: 1;
    overflow: hidden;
}

.show_title {
    display: flex;
    align-items: center;
}

.show_title .title {
    font-size: 1rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.3rem;
}

.show_time {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--van-gray-7);
}

.progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--van-white);
}

.skills {
    height: 100%;
}

.skills-played {
    width: 80%;
    background-color: var(--van-red);
}

.skills-end {
    width: 100%;
    background-color: var(--van-green);
}

.show_hall {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.item_hall {
    background-color: var(--van-gray-7);
    font-size: 1.4rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--van-white);
    text-shadow: 0 0 1px white, 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px white;
}
</style>
